<template>
  <div>
    <!-- 添加或修改公告对话框 -->
    <el-dialog title="规则设置" :visible.sync="$parent.open" width="780px" :show-close="false" :before-close="() => ''"
      append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="145px">
        <div class="center_dialog">
          <div v-for="(v, i) in form.list" :key="i">
            <el-form-item :label="`提醒${i + 1}`" :prop="`list[${i}].eventName`" :rules="rules.eventName">
              <el-input v-model="v.eventName" style="width:90%" placeholder="请输入提醒名称"></el-input>
              <el-button v-if="i === 0" style="margin-left:3px" @click="add" type="primary" icon="el-icon-plus"
                circle></el-button>
              <el-button v-else style="margin-left:3px" @click="del(i)" type="danger" icon="el-icon-delete"
                circle></el-button>
            </el-form-item>
            <el-form-item label="播报间隔时间(分钟)" :prop="`list[${i}].noticeInterval`" :rules="rules.noticeInterval">
              <el-input-number v-model="v.noticeInterval" placeholder="分钟" controls-position="right"
                :min="10"></el-input-number>
            </el-form-item>
            <el-form-item label="起算时间" :prop="`list[${i}].timingFromTime`" :rules="rules.timingFromTime">
              <el-time-select style="width:200px" v-model="v.timingFromTime" :picker-options="{
                start: '00:00',
                step: '00:30',
                end: '23:30'
              }" placeholder="选择时间">
              </el-time-select>
            </el-form-item>
            <el-form-item label="日期设置">
              <el-radio-group v-model="v.isUnlimited" @change="handleradio(v)">
                <el-radio label="0">限制</el-radio>
                <el-radio label="1">不限制</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="v.isUnlimited === '0'" label="定时日期" :prop="`list[${i}].datearr`" :rules="rules.datearr">
              <el-date-picker style="width:90%" v-model="v.datearr" @change="chandledate(v)" value-format="yyyy-MM-dd"
                type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="定时时间" :prop="`list[${i}].timearr`" :rules="rules.timearr">
              <el-time-picker style="width:90%" is-range v-model="v.timearr"
                :default-value="[new Date(2016, 9, 10, 0, 0), new Date(2016, 9, 10, 23, 0)]" value-format="HH:mm"
                @change="chandletime(v)" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
            <el-divider v-if="form.list && form.list.length - 1 !== i"></el-divider>
          </div>

        </div>
      </el-form>
      <div align="center" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="() => $parent.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getruleListSelect, getruleList, Createdrule } from "@/api/system/difftype.js";
// import Upload from '@/components/upload/index.vue'
export default {
  props: ['title', 'rowObj'],
  components: {
    // Upload
  },
  data () {
    return {

      form: {
        list: [
          {
            "eventName": undefined,    //事件名称
            "noticeInterval": undefined,     //通知间隔时间
            isUnlimited: '0',
            "timingFromTime": undefined,   //定时起算时间
            "timingStartDate": undefined,  //定时开始日期
            "timingEndDate": undefined,    //定时结束日期
            "timingStartTime": undefined,  //定时开始时间
            "timingEndTime": undefined,     //定时结束时间
            datearr: [],
            timearr: []
          }
        ]
      },
      rules: {
        eventName: { required: true, message: '必填', trigger: ['blur', 'change'] },
        noticeInterval: { required: true, message: '必填', trigger: ['blur', 'change'] },
        timingFromTime: { required: true, message: '必填', trigger: ['blur', 'change'] },
        datearr: { required: true, message: '必填', trigger: ['blur', 'change'] },
        timearr: { required: true, message: '必填', trigger: ['blur', 'change'] },
      }
    }
  },
  computed: {
  },
  created () {
    this.getlist()
  },
  methods: {
    add () {
      if (this.form.list.length >= 5) return this.$message.error('最多添加5个提醒')
      this.form.list.push({
        "eventName": undefined,    //事件名称
        "noticeInterval": undefined,     //通知间隔时间
        isUnlimited: '0',
        "timingFromTime": undefined,   //定时起算时间
        "timingStartDate": undefined,  //定时开始日期
        "timingEndDate": undefined,    //定时结束日期
        "timingStartTime": undefined,  //定时开始时间
        "timingEndTime": undefined,     //定时结束时间
        datearr: [],
        timearr: []
      })
    },
    del (index) {
      this.form.list.splice(index, 1)
    },
    handleradio (v) {
      if (v.isUnlimited === '1') {
        v.timingStartDate = '2000-01-01'
        v.timingEndDate = '2100-01-01'
      } else {
        v.timingStartDate = undefined
        v.timingEndDate = undefined
        v.datearr = []

      }
    },
    chandledate (v) {
      if (v.datearr) {
        v.timingStartDate = v.datearr[0]
        v.timingEndDate = v.datearr[1]
      } else {
        v.timingStartDate = undefined
        v.timingEndDate = undefined
      }
    },
    chandletime (v) {
      if (v.timearr) {
        v.timingStartTime = v.timearr[0]
        v.timingEndTime = v.timearr[1]
      } else {
        v.timingStartTime = undefined
        v.timingEndTime = undefined
      }
    },
    async getlist () {
      let { data: data } = await getruleListSelect();
      if (data.count === 0) return false
      this.form.list = data.list.map(item => {
        return {
          "eventName": item.eventName,    //事件名称
          "noticeInterval": item.noticeInterval,     //通知间隔时间
          isUnlimited: item.isUnlimited,
          "timingFromTime": item.timingFromTime,   //定时起算时间
          "timingStartDate": item.timingStartDate,  //定时开始日期
          "timingEndDate": item.timingEndDate,    //定时结束日期
          "timingStartTime": item.timingStartTime,  //定时开始时间
          "timingEndTime": item.timingEndTime,     //定时结束时间
          datearr: [item.timingStartDate, item.timingEndDate],
          timearr: [item.timingStartTime, item.timingEndTime]
        }
      })
    },
    //提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let params = this.form.list
          Createdrule(params).then(res => {
            if (res.code === 200) {
              getruleList().then(res => {//存储提醒管理的规则
                let data = res.data.list.map(item => {
                  return {
                    ...item,
                    play: 1
                  }
                })
                sessionStorage.setItem('ruleList', JSON.stringify(data))
                this.$store.commit('SET_RULELIST', data)
              })
              this.$message.success(res.msg)
              this.$parent.open = false
              this.$parent.handleUpdate()
            }
          })
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 75%;
  margin: 0px auto;

  .textmin {
    font-size: 12px;
    color: red;
  }
}
</style>